// 导航守卫
import router from '@/router/index'
import store from '@/store'
router.beforeEach(async(to, from, next) => {
  const token = store.state.user.token
  //   已登录
  if (token) {
    if (to.path === '/login' || to.path === '/register') {
      next('/')
    } else {
      // 为了保证先获取到用户，再进入页面
      // 因此我们可以把调用actions函数的代码写在导航守卫中
      // 并且使用await 等待数据获取成功在进入页面
      if (!store.state.user.userInfo.id) {
        // 判断只有用户信息不存在的时候才需要重新调用函数获取用户信息
        await store.dispatch('user/getUserInfo')
        // 调用获取动态路由数据的函数
        const menus = store.state.user.userInfo.menus

        const routes = await store.dispatch('permissions/filterRoutes', menus)
        console.log(21, routes)
        // 获取筛选出来的具有访问权限的路由数组
        // store.state.permission.routes
        // console.log(32, store.state.permission.routes)
        // 把获取到具有访问权限的routes数组添加到路由规则中
        // router.addRoutes(routes)
        // 在动态路由页面中刷新浏览器，会出现跳转404页面问题
        // 解决方法：把404路由从静态路由规则中删除，提取到动态路由中一起加入路由规则
        router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }])
        // 此刻页面会出现一片空白的问题
        // 解决方法：当动态路由数据添加到路由规则中之后，重新跳转到原来的目标路由中即可
        // next(跳转路径) 表示跳转 next()表示放行
        return next(to.path) // 执行这个行代码的时候，会重新触发导航守卫
      }
      next()
    }
  } else {
    // 未登录
    if (to.path === '/login' || to.path === '/404' || to.path === '/register') {
      next()
    } else {
      next('/login')
    }
  }
})
